<template>
  <div id="background">
    <img class="logo" :src="logoSrc" alt="" />
    <div class="matchName">{{ matchName }}</div>
    <el-carousel
      :interval="8000"
      :autoplay="true"
      style="height: 100%; width: 100%"
      height="100%"
      indicator-position="none"
      arrow="never"
    >
      <el-carousel-item
        v-for="(value, pageIndex) in Math.ceil(liveInfo.length / 4)"
        :key="pageIndex"
      >
        <ul class="matchList">
          <li
            class="playGround"
            v-for="item in liveInfo.slice(pageIndex * 4, (pageIndex + 1) * 4)"
          >
            <div class="block">
              <div class="matchInfo">
                <div
                  v-if="item.status === 0 || item.status === 1"
                  style="background: #409eff"
                  class="statusPoint"
                ></div>
                <div
                  v-if="item.status == 0 || item.status == 1"
                  style="color: #409eff"
                  class="status"
                >
                  {{ item.status | matchStatus }}
                </div>
                <div
                  v-if="item.status == 2"
                  style="background: #67c23a"
                  class="statusPoint"
                ></div>
                <div
                  v-if="item.status == 2"
                  style="color: #67c23a"
                  class="status"
                >
                  {{ item.status | matchStatus }}
                </div>
                <div
                  v-if="item.status == 3"
                  style="background: #ff0000"
                  class="statusPoint"
                ></div>
                <div
                  v-if="item.status == 3"
                  style="color: #ff0000"
                  class="status"
                >
                  {{ item.status | matchStatus }}
                </div>
                <div
                  v-if="item.status == 4"
                  style="background: #ff8200"
                  class="statusPoint"
                ></div>
                <div
                  v-if="item.status == 4"
                  style="color: #ff8200"
                  class="status"
                >
                  {{ item.status | matchStatus }}
                </div>
                <div class="time">比赛用时:</div>
                <div class="gameTime">{{ item.game_time }}</div>
              </div>
              <div class="topContent">
                <div class="playGround">
                  {{ item.group_name }}——{{ item.ground_name }}
                  {{ item.site.split(",")[0] }}#
                </div>
                <ul class="plate">
                  <li v-for="round in item.round_num.length" class="plate">
                    {{ round }}
                  </li>
                  <li class="plate">Pts</li>
                </ul>
              </div>
              <div class="bottomContent">
                <div class="orderContainer">
                  <div
                    v-if="
                      item.com_system == '1' ||
                      item.com_system == '4' ||
                      item.com_system == '5'
                    "
                    class="stage"
                  >
                    {{ item.com_system | matchStage(item.stage) }}
                  </div>
                  <div class="wheel" v-if="item.wheel">
                    {{
                      item.wheel
                        | matchWheel(
                          item.wheel_number,
                          item.com_system,
                          item.stage,
                          item.isno,
                          item.field
                        )
                    }}
                  </div>
                </div>
                <div class="score">
                  <div class="playerContainer">
                    <div class="teamA">
                      <div
                        v-if="item.clash_info.user_id_a.split(',').length === 1"
                        class="playerName"
                      >
                        {{ item.clash_info.name_a }}
                        <span
                          v-if="
                            item.clash_info.team_name_a != '' &&
                            item.clash_info.team_name_b != ''&&item.clash_info.team_name_a !=null
                          "
                          >[{{ item.clash_info.team_name_a }}]</span
                        >
                        <span
                          v-if="
                            item.clash_info.one_limit_a !== '' &&
                            item.clash_info.one_limit_a !== null &&
                            item.clash_info.one_limit_a !== 'null' &&
                            item.clash_info.team_name_a == null
                          "
                          >[{{ item.clash_info.one_limit_a }}]</span
                        >
                      </div>
                      <div
                        v-if="item.clash_info.user_id_a.split(',').length === 2"
                        class="playerName"
                      >
                        {{ item.clash_info.name_a.split("/")[0] }}
                        <span
                          v-if="
                            item.clash_info.team_name_a != '' &&
                            item.clash_info.team_name_b != ''&&item.clash_info.team_name_a !=null
                          "
                          >[{{ item.clash_info.team_name_a }}]</span
                        >
                        <span
                          v-if="
                            item.clash_info.one_limit_a !== '' &&
                            item.clash_info.one_limit_a !== null &&
                            item.clash_info.one_limit_a !== 'null' &&
                            item.clash_info.team_name_a == null
                          "
                          >[{{
                            item.clash_info.one_limit_a.split("/")[0]
                          }}]</span
                        >
                      </div>
                      <div
                        v-if="item.clash_info.user_id_a.split(',').length === 2"
                        class="playerName"
                      >
                        {{ item.clash_info.name_a.split("/")[1] }}
                        <span
                          v-if="
                            item.clash_info.team_name_a != '' &&
                            item.clash_info.team_name_b != ''&&item.clash_info.team_name_a !=null
                          "
                          >[{{ item.clash_info.team_name_a }}]</span
                        >
                        <span
                          v-if="
                            item.clash_info.one_limit_a !== '' &&
                            item.clash_info.one_limit_a !== null &&
                            item.clash_info.one_limit_a !== 'null' &&
                            item.clash_info.team_name_a == null
                          "
                          >[{{
                            item.clash_info.one_limit_a.split("/")[1]
                          }}]</span
                        >
                      </div>
                      <div
                        v-if="
                          item.clash_info.user_id_a.split(',').length === 1 &&
                          item.serve_user == item.clash_info.user_id_a
                        "
                        class="serveTeam"
                      ></div>
                      <div
                        v-if="
                          item.clash_info.user_id_a.split(',').length === 2 &&
                          item.serve_user ==
                            item.clash_info.user_id_a.split(',')[0]
                        "
                        class="serveA"
                      ></div>
                      <div
                        v-if="
                          item.clash_info.user_id_a.split(',').length === 2 &&
                          item.serve_user ==
                            item.clash_info.user_id_a.split(',')[1]
                        "
                        class="serveB"
                      ></div>
                    </div>
                    <div class="teamB">
                      <div
                        v-if="item.clash_info.user_id_b.split(',').length === 1"
                        class="playerName"
                      >
                        {{ item.clash_info.name_b }}
                        <span
                          v-if="
                            item.clash_info.team_name_a != '' &&
                            item.clash_info.team_name_b != ''&&item.clash_info.team_name_b !=null
                          "
                          >[{{ item.clash_info.team_name_b }}]</span
                        >
                        <span
                          v-if="
                            item.clash_info.one_limit_b !== '' &&
                            item.clash_info.one_limit_b !== null &&
                            item.clash_info.one_limit_b !== 'null'
                          "
                          >[{{ item.clash_info.one_limit_b }}]</span
                        >
                      </div>
                      <div
                        v-if="item.clash_info.user_id_b.split(',').length === 2"
                        class="playerName"
                      >
                        {{ item.clash_info.name_b.split("/")[0] }}
                        <span
                          v-if="
                            item.clash_info.team_name_a != '' &&
                            item.clash_info.team_name_b != ''&&item.clash_info.team_name_b !=null
                          "
                          >[{{ item.clash_info.team_name_b }}]</span
                        >
                        <span
                          v-if="
                            item.clash_info.one_limit_b !== '' &&
                            item.clash_info.one_limit_b !== null &&
                            item.clash_info.one_limit_b !== 'null'
                          "
                          >[{{
                            item.clash_info.one_limit_b.split("/")[0]
                          }}]</span
                        >
                      </div>
                      <div
                        v-if="item.clash_info.user_id_b.split(',').length === 2"
                        class="playerName"
                      >
                        {{ item.clash_info.name_b.split("/")[1] }}
                        <span
                          v-if="
                            item.clash_info.team_name_a != '' &&
                            item.clash_info.team_name_b != ''&&item.clash_info.team_name_b !=null
                          "
                          >[{{ item.clash_info.team_name_b }}]</span
                        >
                        <span
                          v-if="
                            item.clash_info.one_limit_b !== '' &&
                            item.clash_info.one_limit_b !== null &&
                            item.clash_info.one_limit_b !== 'null'
                          "
                          >[{{
                            item.clash_info.one_limit_b.split("/")[1]
                          }}]</span
                        >
                      </div>
                      <div
                        v-if="
                          item.clash_info.user_id_b.split(',').length === 1 &&
                          item.serve_user == item.clash_info.user_id_b
                        "
                        class="serveTeam"
                      ></div>
                      <div
                        v-if="
                          item.clash_info.user_id_b.split(',').length === 2 &&
                          item.serve_user ==
                            item.clash_info.user_id_b.split(',')[0]
                        "
                        class="serveC"
                      ></div>
                      <div
                        v-if="
                          item.clash_info.user_id_b.split(',').length === 2 &&
                          item.serve_user ==
                            item.clash_info.user_id_b.split(',')[1]
                        "
                        class="serveD"
                      ></div>
                    </div>
                  </div>
                  <ul class="scoreList">
                    <li v-for="score in item.round_num" class="scoreList">
                      <div class="topScore">
                        {{ score.top }}
                        <span
                          v-if="
                            score.tiebreak !== '' &&
                            parseInt(score.top) < parseInt(score.bot)
                          "
                          class="tiebreak"
                          >{{ score.tiebreak }}</span
                        >
                      </div>
                      <div class="botScore">
                        {{ score.bot }}
                        <span
                          v-if="
                            score.tiebreak !== '' &&
                            parseInt(score.top) > parseInt(score.bot)
                          "
                          class="tiebreak"
                          >{{ score.tiebreak }}</span
                        >
                      </div>
                    </li>
                    <li class="scoreList">
                      <div class="topScore">
                        {{ item.score_num.split(":")[0] }}
                      </div>
                      <div class="botScore">
                        {{ item.score_num.split(":")[1] }}
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import screenfull from "screenfull";
export default {
  data() {
    return {
      liveInfo: [],
      show: false,
      page: "",
      name_a: "",
      name_b: "",
      logoSrc: "",
      matchName: "",
    };
  },
  created() {
    this.led_info();
  },
  filters: {
    teams(site) {
      return site.split(",")[0];
    },
    wheelName: (battle) => {
      if (
        (battle.com_system == 1 && battle.stage == 2) ||
        battle.com_system == 3
      ) {
        let maxWheel = battle.wheel_number;
        let wheel = battle.wheel;
        let wheelName = "";
        if (wheel == maxWheel) wheelName = "决赛";
        if (wheel == parseInt(maxWheel) - 1) wheelName = "半决赛";
        if (wheel == parseInt(maxWheel) - 2) wheelName = "1/4决赛";
        if (wheel < parseInt(maxWheel) - 2) wheelName = `第${battle.wheel}轮`;
        return wheelName;
      } else {
        return `第${battle.wheel}轮`;
      }
    },
    matchStatus(status) {
      if (status == 0) {
        return "即将开始";
      } else if (status == 1) {
        return "热身";
      } else if (status == 2) {
        return "进行中";
      } else if (status == 3) {
        return "已结束";
      } else if (status == 4) {
        return "比赛暂停";
      }
    },
    matchStage(com_system, stage) {
      if (com_system == 1 || com_system == 4) {
        //1和4才有阶段
        if (stage == 1) {
          return "第一阶段";
        } else if (stage == 2) {
          return "第二阶段";
        }
      } else if (com_system == 5) {
        return "第" + stage + "区";
      }
    },
    matchWheel(wheel, maxWheel, com_system, stage, isno, field) {
      if (
        (com_system == 1 && stage == 2) ||
        com_system == 3 ||
        com_system == 5
      ) {
        const distance = maxWheel - wheel;
        // 没有淘汰附加赛
        if (isno == 0) {
          // 最后一轮
          if (distance == 0) {
            return "决赛";
          }
          // 倒数第二轮
          else if (distance == 1) {
            return "半决赛";
          } else if (distance == 2) {
            return "1/4决赛";
          } else {
            return "第" + wheel + "轮";
          }
        } else {
          // 最后一轮
          if (distance == 0) {
            switch (field) {
              case 1:
                return "决赛";
                break;
              case 2:
                return "5-6附加赛";
                break;
              case 3:
                return "3-4附加赛";
                break;
              case 4:
                return "7-8附加赛";
                break;
            }
          }
          // 倒数第二轮
          else if (distance == 1) {
            switch (field) {
              case 1:
                return "半决赛";
                break;
              case 2:
                return "半决赛";
                break;
              case 3:
                return "5-8附加赛";
                break;
              case 4:
                return "5-8附加赛";
                break;
            }
          } else if (distance == 2) {
            return "1/4决赛";
          } else {
            return "第" + wheel + "轮";
          }
        }
      } else {
        return "第" + wheel + "轮";
      }
    },
  },
  methods: {
    led_info() {
      this.$axios
        .post(
          "/LedShow/led_more_info",
          {
            com_id: this.$route.query.com_id,
            time: this.$route.query.time,
          },
          {
            headers: {
              token: window.sessionStorage.getItem("token"),
            },
          }
        )
        .then((res) => {
          if (res.data.code == 2000) {
            this.liveInfo = res.data.data;
            if (res.data.data.length == 1) {
              this.name_a = res.data.data[0].clash_info.name_a;
              this.name_b = res.data.data[0].clash_info.name_b;
            }
            // this.page = res.data.data.length > 4 ? 2 : 1
            if (res.data.data.length <= 4) {
              this.page = 1;
            } else {
              this.page = Math.ceil(res.data.data.length / 4);
            }
            this.show = true;
            this.matchName = this.liveInfo[0].com_name;
            this.logoSrc = this.liveInfo[0].com_logo;
          } else {
            this.show = false;
          }
          setTimeout(() => {
            this.led_info();
          }, 3000);
        })
        .catch((res) => {
          this.led_info();
        });
    },
  },
};
</script>
<style lang="less" scoped>
#background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-image: url("https://qncdn.tissys.com/beijing2.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;

  img.logo {
    width: 80px;
    position: absolute;
    top: 10px;
    left: 14%;
  }

  div.matchName {
    width: 60%;
    height: 100px;
    margin: 0 auto;
    color: #fff;
    font-size: 40px;
    text-align: center;
    line-height: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  ul.matchList {
    width: 95%;
    height: calc(100% - 220px);
    min-height: 850px;
    // padding-left:20px;
    // padding-right:20px;
    padding: 20px;
    margin: 0 auto;
    margin-top: 50px;
    border: 1px solid #00a0e9;
    display: flex;
    justify-content: space-between;
    // align-items: center;
    flex-wrap: wrap;
    background: #0b1020;

    li.playGround {
      width: 49%;
      height: 47%;
      min-height: 400px;
      border: 2px solid #00a0e9;

      // padding:10px;
      div.matchInfo {
        position: relative;
        width: calc(100% - 40px);
        height: 50px;
        margin: 0 auto;
        border: 1px solid #00a0e9;
        margin-top: 15px;

        div.statusPoint {
          position: absolute;
          width: 30px;
          height: 30px;
          background-color: #adfe01;
          left: 10px;
          top: 10px;
        }

        div.status {
          position: absolute;
          left: 50px;
          top: 5px;
          width: 200px;
          height: 40px;
          line-height: 40px;
          color: #adfe01;
          font-weight: bold;
          font-size: 32px;
        }

        div.time {
          position: absolute;
          right: 120px;
          top: 5px;
          width: 150px;
          height: 40px;
          line-height: 40px;
          color: #fff;
          font-weight: bold;
          font-size: 32px;
          text-align: right;
        }

        div.gameTime {
          position: absolute;
          right: 0px;
          top: 5px;
          width: 120px;
          height: 40px;
          line-height: 40px;
          color: #fff;
          font-weight: bold;
          font-size: 30px;
          text-align: center;
        }
      }

      div.topContent {
        display: flex;
        justify-content: space-between;
        width: calc(100% - 40px);
        margin: 0 auto;
        margin-top: 20px;
        height: 60px;

        div.playGround {
          height: 100%;
          flex-grow: 1;
          // margin-right:30px;
          background-color: #191c2b;
          text-align: center;
          line-height: 60px;
          color: #00a0e9;
          font-size: 30px;
          font-weight: bold;
        }

        ul.plate {
          height: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;

          li.plate {
            height: 100%;
            width: 80px;
            background-color: #191c2b;
            border-left: 4px solid #272a39;
            text-align: center;
            line-height: 60px;
            color: #adff2f;
            font-size: 36px;
            font-weight: bold;
          }
        }
      }

      div.bottomContent {
        display: flex;
        justify-content: space-between;
        width: calc(100% - 40px);
        margin: 0 auto;
        margin-top: 20px;
        height: 220px;
        // min-height: 400px;
        margin-top: 20px;

        div.orderContainer {
          display: flex;
          justify-content: space-around;
          align-items: center;
          width: 100px;
          height: 100%;
          // margin-right:20px;
          border: 1px solid #00a0e9;

          div.stage,
          div.wheel {
            width: 32px;
            color: #fff;
            font-size: 32px;
            font-weight: bold;
            text-align: center;
          }
        }

        div.score {
          flex-grow: 1;
          height: 100%;
          display: flex;
          justify-content: space-between;
          border: 1px solid #00a0e9;

          div.playerContainer {
            height: 100%;
            flex-grow: 1;

            div.teamA {
              display: flex;
              position: relative;
              flex-direction: column;
              justify-content: space-around;
              width: 100%;
              height: 50%;
              padding-left: 20px;
              margin: 0 auto;
              border-bottom: 1px solid #00a0e9;
              box-sizing: border-box;

              div.serveTeam {
                position: absolute;
                width: 30px;
                height: 30px;
                background-color: #adfe01;
                border-radius: 50%;
                right: 5px;
                top: calc(50% - 20px);
              }

              div.serveA {
                position: absolute;
                width: 30px;
                height: 30px;
                background-color: #adfe01;
                border-radius: 50%;
                right: 5px;
                top: 10px;
              }

              div.serveB {
                position: absolute;
                width: 30px;
                height: 30px;
                background-color: #adfe01;
                border-radius: 50%;
                right: 5px;
                bottom: 10px;
              }
            }

            div.teamB {
              display: flex;
              position: relative;
              flex-direction: column;
              justify-content: space-around;
              width: 100%;
              height: 50%;
              margin: 0 auto;
              padding-left: 20px;
              box-sizing: border-box;

              div.serveTeam {
                position: absolute;
                width: 30px;
                height: 30px;
                background-color: #adfe01;
                border-radius: 50%;
                right: 5px;
                top: calc(50% - 20px);
              }

              div.serveC {
                position: absolute;
                width: 30px;
                height: 30px;
                background-color: #adfe01;
                border-radius: 50%;
                right: 5px;
                top: 10px;
              }

              div.serveD {
                position: absolute;
                width: 30px;
                height: 30px;
                background-color: #adfe01;
                border-radius: 50%;
                right: 5px;
                bottom: 10px;
              }
            }

            div.playerName {
              font-size: 36px;
              color: #fff;
              font-weight: bold;

              span {
                font-size: 30px;
                font-weight: normal;
              }
            }
          }

          ul.scoreList {
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            li.scoreList {
              height: 100%;
              width: 82px;
              text-align: center;
              border-left: 1px solid #00a0e9;

              div.topScore {
                position: relative;
                height: 50%;
                line-height: 110px;
                font-size: 50px;
                font-weight: bold;
                color: #f6fe01;
                border-bottom: 1px solid #00a0e9;

                span.tiebreak {
                  position: absolute;
                  height: 50px;
                  font-size: 30px;
                  color: #f6fe01;
                  right: 10px;
                  top: 10px;
                  line-height: 50px;
                }
              }

              div.botScore {
                position: relative;
                height: 50%;
                line-height: 110px;
                font-size: 50px;
                font-weight: bold;
                color: #f6fe01;

                span.tiebreak {
                  position: absolute;
                  height: 50px;
                  font-size: 30px;
                  color: #f6fe01;
                  right: 10px;
                  top: 10px;
                  line-height: 50px;
                }
              }
            }

            li.scoreList:last-child > div {
              color: #fea700;
            }
          }
        }
      }
    }
  }
}

// .moreScreen {
// 	// pointer-events: none;
// 	position: absolute;
// 	top: 0;
// 	left: 0;
// 	width: 100%;
// 	height: 100%;
// 	overflow: hidden;
// 	background: #000;
// 	color: #62BDF2;
// 	display: flex;
// 	flex-wrap: wrap;
// 	z-index: 1000;

// 	.title {
// 		color: #AAAAAA;
// 		font-size: 28px;
// 		margin: 24px 0 29px 0;
// 		padding-bottom: 24px;
// 		padding-left: 58px;
// 		border-bottom: 1px #571e1c solid;
// 	}

// 	.main {
// 		padding: 32px;
// 		border: 5px #B43E3A solid;
// 		width: 50%;
// 		height: 50%;
// 		box-sizing: border-box;
// 	}

// 	.wayOne {
// 		height: 50%;
// 		width: 50%;
// 	}

// 	.group_name {
// 		font-size: 40px;
// 		font-weight: 600;
// 		// margin-top: 10px;
// 		margin-left: 126px;
// 		// margin-top: 10%;
// 		// margin-left: 23%;
// 		margin-bottom: 20px;
// 	}

// 	.flex {
// 		display: flex;

// 		.match_name {
// 			position: relative;
// 			border-left: 5px #B43E3A solid;
// 			width: 90%;

// 			&:after {
// 				content: '';
// 				position: absolute;
// 				width: 100%;
// 				top: 50%;
// 				border-bottom: 3px dotted #b43e3a;
// 			}

// 			.name_a,
// 			.name_b {
// 				font-size: 50px;
// 				font-weight: 700;
// 				display: flex;
// 				justify-content: space-between;

// 				.name {
// 					display: flex;
// 					align-items: center;
// 					// align-items: flex-start;
// 					// padding: 5px 17px;
// 					padding: 0 17px;
// 					line-height: 1.2;
// 					.serve {
// 						display: inline-block;
// 						width: 60px;
// 						height: 60px;
// 						border-radius: 50%;
// 						background: #8BC34A;
// 						font-size: 65px;
// 						margin-left: 20px;
// 					}
// 				}

// 				.score {
// 					display: flex;
// 					// width: 50%;
// 					width: auto;

// 					.round_num {
// 						height: 100%;
// 						font-size: 150px;
// 						font-weight: bold;
// 					}

// 					.point {
// 						position: relative;
// 						// width: 125px;
// 						width: 100px;
// 						height: 100%;
// 						display: flex;
// 						align-items: center;
// 						justify-content: center;
// 						border-left: 3px dotted #b43e3a;

// 						// border-bottom: none;
// 						i {
// 							position: absolute;
// 							top: 10px;
// 							right: 20px;
// 							font-size: 50px;
// 						}
// 					}

// 					.point_fz {
// 						width: 200px;
// 					}

// 					.score_num {
// 						display: flex;
// 						align-items: center;
// 						justify-content: center;
// 						// width: 125px;
// 						width: 200px;
// 						border: 3px dotted #b43e3a;
// 						height: 100%;
// 						font-size: 150px;
// 						font-weight: bold;
// 						color: #8BC34A;
// 					}

// 					.score_num_fz {
// 						width: 200px;
// 						// font-size: 250px;
// 					}
// 				}
// 			}

// 			.name_a .score {
// 				.round_num {
// 					.point {
// 						border-top: 3px dotted #b43e3a;
// 					}
// 				}

// 				.score_num {
// 					border-bottom: none;
// 				}
// 			}

// 			.name_b .score {
// 				.round_num {
// 					.point {
// 						border-bottom: 3px dotted #b43e3a;
// 					}
// 				}

// 				.score_num {
// 					border-top: none;
// 				}
// 			}
// 		}
// 	}

// 	.area {
// 		font-size: 40px;
// 		margin-left: 0;
// 		// margin-left: 14.1%;
// 		margin-right: 29px;
// 		width: 40px;
// 		display: flex;
// 		align-items: center;
// 		text-align: center;
// 	}

// 	.round {
// 		font-size: 72px;
// 		width: 75px;
// 		display: flex;
// 		align-items: center;
// 		text-align: center;
// 		margin-right: 29px;
// 	}

// 	.matchTime {
// 		// margin-left: 216px;
// 		margin-left: 126px;
// 		margin-top: 15px;
// 		// margin-bottom: 20px;
// 		// margin-bottom: 10%;
// 		font-size: 40px;
// 	}
// }

// #background {
// 	position: absolute;
// 	top: 0;
// 	left: 0;
// 	width: 100%;
// 	height: 100%;
// 	overflow: hidden;
// 	background: #000;
// 	color: #62BDF2;

// 	.title {
// 		color: #AAAAAA;
// 		font-size: 28px;
// 		margin: 24px 0 29px 0;
// 		padding-bottom: 24px;
// 		padding-left: 58px;
// 		border-bottom: 1px #571e1c solid;
// 	}

// 	.main {
// 		margin: 32px;
// 		border: 5px #B43E3A solid;
// 	}

// 	.group_name {
// 		font-size: 80px;
// 		font-weight: 600;
// 		margin-top: 10px;
// 		margin-left: 216px;
// 		// margin-top: 10%;
// 		// margin-left: 23%;
// 		margin-bottom: 20px;
// 	}

// 	.flex {
// 		display: flex;

// 		.match_name {
// 			position: relative;
// 			border-left: 5px #B43E3A solid;
// 			width: 90%;

// 			&:after {
// 				content: '';
// 				position: absolute;
// 				width: 100%;
// 				top: 50%;
// 				border-bottom: 3px dotted #b43e3a;
// 			}

// 			.name_a,
// 			.name_b {
// 				font-size: 100px;
// 				font-weight: 700;
// 				display: flex;
// 				justify-content: space-between;

// 				.name {
// 					display: flex;
// 					align-items: center;
// 					padding: 50px 33px;

// 					.serve {
// 						display: inline-block;
// 						width: 60px;
// 						height: 60px;
// 						border-radius: 50%;
// 						background: #8BC34A;
// 						font-size: 65px;
// 						margin-left: 20px;
// 					}
// 				}

// 				.score {
// 					display: flex;
// 					// width: 50%;
// 					width: auto;

// 					.round_num {
// 						height: 100%;
// 						font-size: 300px;
// 						font-weight: bold;
// 					}

// 					.point {
// 						position: relative;
// 						// width: 125px;
// 						width: 200px;
// 						height: 100%;
// 						display: flex;
// 						align-items: center;
// 						justify-content: center;
// 						border-left: 3px dotted #b43e3a;

// 						// border-bottom: none;
// 						i {
// 							position: absolute;
// 							top: 10px;
// 							right: 20px;
// 							font-size: 50px;
// 						}
// 					}

// 					.point_fz {
// 						width: 400px;
// 					}

// 					.score_num {
// 						display: flex;
// 						align-items: center;
// 						justify-content: center;
// 						// width: 125px;
// 						width: 200px;
// 						border: 3px dotted #b43e3a;
// 						height: 100%;
// 						font-size: 300px;
// 						font-weight: bold;
// 						color: #8BC34A;
// 					}

// 					.score_num_fz {
// 						width: 400px;
// 						// font-size: 250px;
// 					}
// 				}
// 			}

// 			.name_a .score {
// 				.round_num {
// 					.point {
// 						border-top: 3px dotted #b43e3a;
// 					}
// 				}

// 				.score_num {
// 					border-bottom: none;
// 				}
// 			}

// 			.name_b .score {
// 				.round_num {
// 					.point {
// 						border-bottom: 3px dotted #b43e3a;
// 					}
// 				}

// 				.score_num {
// 					border-top: none;
// 				}
// 			}
// 		}
// 	}

// 	.area {
// 		font-size: 72px;
// 		margin-left: 73px;
// 		// margin-left: 14.1%;
// 		margin-right: 29px;
// 		width: 75px;
// 		display: flex;
// 		align-items: center;
// 		text-align: center;
// 	}

// 	.round {
// 		font-size: 72px;
// 		width: 75px;
// 		display: flex;
// 		align-items: center;
// 		text-align: center;
// 		margin-right: 29px;
// 	}

// 	.matchTime {
// 		// margin-left: 216px;
// 		margin-left: 216px;
// 		margin-top: 42px;
// 		margin-bottom: 20px;
// 		// margin-bottom: 10%;
// 		font-size: 72px;
// 	}
// }
</style>
